<template>
	<view>
		<view class="advertising">
			<view class="shop">{{info.name}}</view>
			<view class="table">{{info.number}}</view>
			<!-- <text>￥12.5</text> /30分钟 -->
			<view class="price">  </view>
		</view>
		
		<view class="title">桌台信息</view>
		<view class="name-id">
			<view class="each">
				<view class="name">桌台名称</view>
				<view class="z-flex">
					<!-- <view class="">台球桌-赤甲</view> -->
					<input v-model="info.name" type="text" placeholder="请输入" />
				</view>
			</view>
			<view style="height: 24rpx;width: 1rpx;"></view>
			<view class="each">
				<view class="name">桌台号</view>
				<view class="z-flex">
					<!-- <view class="">6号桌</view> -->
					<input v-model="info.number" type="text" placeholder="请输入" />
				</view>
			</view>
			<view style="height: 24rpx;width: 1rpx;"></view>
			<view class="each">
				<view class="name">桌台状态</view>
				<view class="z-flex">
					<view class="" style="color: #4BC264;" v-if="info.status == 0">空闲中</view>
					<view class="" style="color: #A4A9B7;" v-if="info.status == 1">预订中</view>
					<view class="" style="color: #FF7B18;" v-if="info.status == 2">使用中</view>
				</view>
			</view>
			<view style="height: 24rpx;width: 1rpx;"></view>
			<view class="each">
				<view class="name">下载二维码</view>
				<view class="z-flex">
					<view class="" @click="downloadQrcode">下载</view>
				</view>
			</view>
		</view>
		
		<view class="title">操作信息</view>
		<view class="name-id">
			<view class="each">
				<view class="name">设备接口配置</view>
				<view class="z-flex" @click="allocation">
					<view style="color: #4BC264;">其配置</view>
					<image src="../../static/right-l.png" mode=""></image>
				</view>
			</view>
			<view style="height: 24rpx;width: 1rpx;"></view>
			<view class="each">
				<view class="name">线上自助关台</view>
				<view class="z-flex">
					<view class="btn">关台</view>
				</view>
			</view>
			<view style="height: 24rpx;width: 1rpx;"></view>
			<view class="each">
				<view class="name">手动操作开关</view>
				<view class="z-flex" @click="record">
					<input type="text" disabled placeholder="操作记录" />
					<image src="../../static/select-r.png" mode=""></image>
				</view>
			</view>
			<view style="height: 24rpx;width: 1rpx;"></view>
			<view class="each">
				<view class="name">关联通道</view>
				<view class="z-flex">
					<view class="z-margin-r-32">灯</view>
					<view class="btn">开启</view>
				</view>
			</view>
			<view style="height: 24rpx;width: 1rpx;"></view>
			<view class="each">
				<view class="name">预定功能</view>
				<view class="z-flex" @click="switchBooking">
					<view class="btn" v-if="info.booking">开启</view>
					<view class="btn orange" v-else>关闭</view>
				</view>
			</view>
		</view>
		
		<view class="title">起步消费设置 <text>（默认值都为0表示不设置起步消费）</text> </view>
		<view class="name-id">
			<view class="each">
				<view class="name">时间</view>
				<view class="z-flex">
					<input v-model="info.start_time" type="number" placeholder="请输入" />
					<view class="z-padding-l-8">分钟</view>
					<!-- <image src="../../static/select-r.png" mode=""></image> -->
				</view>
			</view>
			<view style="height: 24rpx;width: 1rpx;"></view>
			<view class="each">
				<view class="name">价格</view>
				<view class="z-flex">
					<view class="z-padding-r-24" style="color: #4BC264;">
						<input v-model="info.start_price" type="number" placeholder="请输入" />
					</view>
					<view>元</view>
				</view>
			</view>
		</view>
		
		<view class="title">起步消费结束后的计费价格</view>
		<view class="name-id">
			<view class="each">
				<view class="name">时间</view>
				<view class="z-flex">
					<view class="time-scope"> 00:00:00 </view>
					<text class="z-padding-lr-8">至</text>
					<view class="time-scope"> 23:59:59</view>
				</view>
			</view>
			<view style="height: 24rpx;width: 1rpx;"></view>
			<view class="each">
				<view class="name">价格</view>
				<view class="z-flex">
					<view class="z-padding-r-24" style="color: #4BC264;">
						<input v-model="info.continue_price" type="number" placeholder="请输入" />
					</view>
					<view>元</view>
				</view>
			</view>
		</view>
		
		<view class="title">价格信息 </view>
		<view class="name-id">
			<view class="each">
				<view class="name">计费方式</view>
				<view class="z-flex">
					<input v-model="info.charge_type" type="number" placeholder="请输入" />
					<view class="z-padding-l-8">分钟</view>
					<!-- <image src="../../static/select-r.png" mode=""></image> -->
				</view>
			</view>
			<view class="explain">此处为起步消费结束之后的计费周期，即每X分钟收费Y元，建议设置不超过10分钟，否则会增加线上平台顾客投诉和差评，若要一键设置所有桌台，请在门店设置中设置</view>
		</view>
		
		
		<view class="name-id">
			<view class="each">
				<view class="name">桌台预付款金额</view>
				<view class="z-flex">
					<view class="z-padding-r-24" style="color: #4BC264;">
						<input style="width: 200rpx;" v-model="info.advance_price" type="number" placeholder="请输入" />
					</view>
					<view>元</view>
				</view>
			</view>
			<view style="height: 24rpx;width: 1rpx;"></view>
			<view class="each">
				<view class="name">信用分免押金金额</view>
				<view class="z-flex">
					<view class="z-padding-r-24" style="color: #4BC264;">
						<input style="width: 200rpx;" v-model="info.credit_price" type="number" placeholder="请输入" />
					</view>
					<view>元</view>
				</view>
			</view>
			<view class="explain">桌台信用分免押金金额设置（最低98，最高199）</view>
		</view>
		
		<view class="Open-info" v-if="info.order.type">
			<view class="info-title">开台信息</view>
			<view class="Open-info-each">
				<view class="info-each-l">开台类型</view>
				
				<view class="info-each-r" v-if="info.order.type == 1">免押金开台</view>
				<view class="info-each-r" v-if="info.order.type == 2">预付款开台</view>
				<view class="info-each-r" v-if="info.order.type == 3">定时开台</view>
				<view class="info-each-r" v-if="info.order.type == 4">美团团购核销</view>
				<view class="info-each-r" v-if="info.order.type == 5">抖音团购核销</view>
				<view class="info-each-r" v-if="info.order.type == 6">月卡开台</view>
			</view>
			<view class="Open-info-each">
				<view class="info-each-l">开台时间</view>
				<view class="info-each-r">{{info.order.createtime | date('yyyy/MM/dd hh:mm')}}</view>
			</view>
			<view class="Open-info-each">
				<view class="info-each-l">已消费金额</view>
				<view class="info-each-r">￥{{info.order.allprice}}</view>
			</view>
			<view class="Open-info-each">
				<view class="info-each-l">已消费时间</view>
				<view class="info-each-r">{{calculateElapsedTime(info.order.createtime*1000)}}</view>
			</view>
		</view>
		
		<view class="statistics">
			<view class="">
				<image src="../../static/item-13.png" mode=""></image>
				统计
			</view>
			<view class="">
				<u-icon name="arrow-right" size="16"></u-icon>
			</view>
		</view>
		
		
		<view style="height: 180rpx; width: 1rpx"></view>
		<view class="btn-box">
			<view class="PlaceAnOrder-btn" @click="submit">提交</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				id:'',
				info:{}
			}
		},
		onLoad(op) {
			this.id = op.id
			this.getTableInfo()
		},
		methods: {
			//预定开关
			switchBooking(){
				this.$api.post('/switchBooking',{
					id:this.id
				}).then((res) => {
					if (res.code == 1) {
						this.$toast(res.msg);
						this.info.booking = !this.info.booking
					}
				}).catch((res) => {});
			},
			//提交信息
			submit(){
				const { id,name,number,start_time,start_price,charge_type,continue_price,advance_price,credit_price } = this.info;
				const info = {id,name,number,start_time,start_price,charge_type,continue_price,advance_price,credit_price}
				// console.log(info,'.........')
				this.$api.post('/editTableInfo',info).then((res) => {
						if (res.code == 1) {
							this.$toast(res.msg);
						}
					}).catch((res) => {});
			},
			//下载二维码
			downloadQrcode(){
				uni.downloadFile({
					url: this.$oss(this.info.qrcode), //仅为示例，并非真实的资源
					success: (res) => {
						if (res.statusCode === 200) {
							uni.saveImageToPhotosAlbum({
								filePath: res.tempFilePath,
								success: function() {
									uni.$u.toast(`保存成功`)
								}
							});
						}
					}
				});
			},
			getTableInfo(){
				this.$api.get('/editTableInfo?id='+this.id).then((res) => {
						if (res.data) {
							this.info = res.data;
						}
					}).catch((res) => {});
			},
			allocation(){
				uni.navigateTo({
					url:'/pages/Device-configuration/Device-configuration'
				})
			},
			record(){
				uni.navigateTo({
					url:'/pages/manual-record/manual-record'
				})
			}
		}
	}
</script>

<style lang="scss">
	.advertising {
		width: 598rpx;
		// height: 300rpx;
		background: rgba(0,0,0,0.5);
		border-radius: 24rpx 24rpx 24rpx 24rpx;
		margin: auto;
		padding: 61rpx 44rpx;
		.shop {
			font-weight: bold;
			font-size: 24rpx;
			color: #FFFFFF;
		}
		.table {
			font-weight: 800;
			font-size: 40rpx;
			color: #FFFFFF;
			margin-top: 16rpx;
		}
		.price {
			width: 76rpx;
			height: 9rpx;
			background: #4BC264;
			margin-top: 49rpx;
			// display: inline-block;
			// height: 48rpx;
			// line-height: 48rpx;
			// padding: 0 16rpx;
			// background: #4BC264;
			// border-radius: 6rpx 6rpx 6rpx 6rpx;
			// font-size: 24rpx;
			// color: #FFFFFF;
			// margin-top: 24rpx;
			// text {
			// 	font-weight: bold;
			// 	font-size: 30rpx;
			// }
		}
	}
	
	.title {
		font-weight: bold;
		font-size: 30rpx;
		color: #1C274C;
		padding: 40rpx 0 0 32rpx;
		text {
			font-size: 22rpx;
			color: #A4A9B7;
		}
	}
	
	.name-id {
		width: 622rpx;
		padding: 32rpx;
		margin: auto;
		background: #F7F8FA;
		border-radius: 40rpx 40rpx 40rpx 40rpx;
		margin-top: 24rpx;
		
		.each {
			width: 558rpx;
			padding: 34rpx 32rpx;
			// height: 106rpx;
			background: #FFFFFF;
			border-radius: 20rpx 20rpx 20rpx 20rpx;
			margin: auto;
			display: flex;
			justify-content: space-between;
			align-items: center;
			font-weight: 500;
			font-size: 28rpx;
			color: #1C274C;
			.name {
				font-weight: bold;
				font-size: 28rpx;
				color: #1c274c;
			}
			.btn {
				width: 100rpx;
				height: 56rpx;
				background: #4BC264;
				border-radius: 10rpx 10rpx 10rpx 10rpx;
				font-weight: bold;
				font-size: 24rpx;
				color: #FFFFFF;
				line-height: 56rpx;
				text-align: center;
			}
			.orange {
				background-color: #FF7B18;
			}
			.time-scope {
				font-weight: 500;
				font-size: 28rpx;
				color: #A4A9B7;
			}
			input {
				font-size: 28rpx;
				text-align: right;
				width: 360rpx;
			}
			image {
				width: 30rpx;
				height: 30rpx;
			}
		}
		.explain {
			font-weight: 500;
			font-size: 22rpx;
			color: #6B738B;
			line-height: 36rpx;
			padding: 24rpx 0 0 0;
		}
	}
	
	.Open-info {
		width: 622rpx;
		padding: 32rpx;
		background: #F7F8FA;
		border-radius: 20rpx 20rpx 20rpx 20rpx;
		margin: auto;
		margin-top: 48rpx;
		.info-title {
			font-weight: bold;
			font-size: 30rpx;
			color: #1C274C;
		}
		.Open-info-each {
			display: flex;
			justify-content: space-between;
			margin-top: 24rpx;
			.info-each-l {
				font-weight: 500;
				font-size: 24rpx;
				color: #A4A9B7;
			}
			.info-each-r {
				font-weight: 500;
				font-size: 24rpx;
				color: #1C274C;
			}
		}
	}
	
	.statistics {
		padding: 30rpx 25rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 622rpx;
		margin: auto;
		background: #F6F8FA;
		border-radius: 20rpx 20rpx 20rpx 20rpx;
		margin-top: 33rpx;
		
		image {
			width: 32rpx;
			height: 32rpx;
			vertical-align: middle;
			margin-right: 16rpx;
		}
		font-weight: bold;
		font-size: 28rpx;
		color: #1C274C;
	}
	
	.btn-box {
		width: 100%;
		position: fixed;
		bottom: 40rpx;
		z-index: 9;
		.PlaceAnOrder-btn {
			width: 686rpx;
			height: 106rpx;
			margin: auto;
			background: #4bc264;
			border-radius: 20rpx 20rpx 20rpx 20rpx;
			font-weight: 800;
			font-size: 34rpx;
			color: #ffffff;
			line-height: 106rpx;
			text-align: center;
		}
	}
</style>
